<template>
  <div class="isupgoods">
    <a-card title="上单权限">
      <div class="search_box">
        <a-tabs v-model="form.type" @change="callback">
          <a-tab-pane key="a" tab="全部">
          </a-tab-pane>
          <a-tab-pane key="1" tab="未审核">
          </a-tab-pane>
          <a-tab-pane key="2" tab="已审核">
          </a-tab-pane>
        </a-tabs>
        <a-input v-model.trim="form.search" style="width:350px;float:right;" placeholder="请输入昵称或手机号" @keyup.enter="getSelectUserInfo" />
      </div>
      <a-table
        :columns="columns"
        :row-key="record => record.id"
        :data-source="data"
        :pagination="pagination"
        :loading="loading"
        @change="handleTableChange">

        <template slot="type" slot-scope="record">
          <a-switch :default-checked="record.type==2?true:false" @change="switchChange(record)" />
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script>
  import { getSelectUserInfo, openTopAuth } from '@/api/account'
  import moment from 'moment'
  export default {
    name: 'Isupgoods',
    data () {
      return {
        form: {
          type: 'a',
          search: ''
        },
        isopen: false,
        open: 1,
        columns: [{
            title: 'ID',
            dataIndex: 'id',
            // sorter: true,
            // width: '20%',
            scopedSlots: {
              customRender: 'id'
            }
          },
          {
            title: '昵称',
            dataIndex: 'user_name',
            // width: '20%',
            scopedSlots: {
              customRender: 'user_name'
            }
          },
          {
            title: '手机号',
            dataIndex: 'phone',
            // width: '20%',
            scopedSlots: {
              customRender: 'phone'
            }
          },
          {
            title: '上单权限',
            // dataIndex: 'type',
            // width: '20%',
            scopedSlots: {
              customRender: 'type'
            }
          },
          {
            title: '上单商品数量',
            dataIndex: 'goods_num',
            // width: '20%',
            align: 'center',
            scopedSlots: {
              customRender: 'goods_num'
            }
          }
          // {
          //   title: '操作',
          //   // dataIndex: 'active',
          //   // width: '20%',
          //   scopedSlots: {
          //     customRender: 'active'
          //   }
          // },

        ],
        data: [
          // {
          //   id: 2, // 用户自增id
          //   user_name: '陈柯帆', // 昵称
          //   phone: '13014616497', // 手机号
          //   create_at: '2020-08-25 10:38:50', // 创建时间
          //   type: 1, // 1=没有上单权限 2拥有上单权限
          //   goods_num: 1 // 上单商品数量
          // }
        ],
        pagination: {},
        loading: false
      }
    },

    computed: {

    },
    created () {
      this.getSelectUserInfo()
    },
    mounted () {

    },
    methods: {
      moment,
      switchChange (item) {
        // console.log(item)
        if (item.type === 2) {
          this.open = 1
        } else {
          this.open = 2
        }
          openTopAuth({
            user_id: item.id,
            is_open: this.open
          })
          .then(res => {
            if (res.code === 200) {
              this.$message.success('修改成功!')
          } else {
            this.$message.info(res.msg)
            }
          })
          .catch(err => {
            console.log(err)
          })
      },
      // 管理获取商品列表
      getSelectUserInfo () {
        this.loading = true
        getSelectUserInfo(this.form)
          .then(res => {
            if (res.code === 200) {
              console.log('账号返回', res)
              this.data = res.data.data
              for (const i in this.data) {
                if (this.data[i].type === 2) {
                  this.data[i].checked = true
                } else {
                  this.data[i].checked = false
                }
              }
              this.loading = false
            } else {
              this.$message.info(res.msg)
              this.loading = false
            }
          })
          .catch(err => {
            console.log(err)
          })
      },
      handleTableChange (pagination, filters, sorter) {
        console.log(pagination)
        const pager = {
          ...this.pagination
        }
        pager.current = pagination.current
        this.pagination = pager
        this.fetch({
          results: pagination.pageSize,
          page: pagination.current,
          sortField: sorter.field,
          sortOrder: sorter.order,
          ...filters
        })
      },
      fetch (params = {}) {
        console.log('params:', params)
        this.loading = true
        // some axaj
      },
      callback () {
        console.log(this.form.status)
        this.getSelectUserInfo()
      }
    }
  }
</script>

<style lang='less' scoped>
  .isupgoods {
    width: 100%;

    .search_box {
      display: flex;
      justify-content: space-between;
    }

    .btns {
      padding: 8px 0;
      float: right;
    }
  }
</style>
